<template>
  <h1>这是根组件</h1>
  {{title}}<br>
  title: <input type="text" v-model="title"><br/>
  name: {{name}}
  <input type="text" v-model="name"><br/>
  user.age: {{age}}
  <input type="text" v-model="age">
  <hr>
  <two-son></two-son>
</template>

<script>
import TwoSon from "../components/TwoSon";
import {provide, reactive, ref, toRefs} from "vue";
export default {
  name: "RootApp",
  components:{
    TwoSon
  },
  //原生写法
  // data(){
  //   return{
  //     title:'这是根组件title的数据'
  //   }
  // },
  // provide(){
  //   return{
  //     title:this.title
  //   }
  // },
  //composition 组合api写法
  setup(){
    let title = ref('这是根组件下组合api提供的title数据');
    //对象方式
    let obj = reactive({
      name : 'yuanxi',
      age : 18
    });
    provide('title',title);
    provide('user',obj);
    return {
      title,
      ...toRefs(obj)
    }
  }
}
</script>

<style scoped>

</style>